<template>
    <div>
        
        <el-dialog title="人员选择" :close-on-click-modal="false" :visible.sync="personForm.visible" width="60vw" top="8vh">
           
            <el-row>
              <el-col :span="24">
                  <el-form :model="form" label-width="120px" :inline='true' class="form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="职务">
                        <el-input v-model="form.name" placeholder="职务"></el-input>
                    </el-form-item>
                   <el-form-item label="机构" prop="auditProcess">
                        <el-select v-model="form.auditProcess" placeholder="请选择机构" class="xiaLa" style="width:100%" :clearable="true">
                          <el-option v-for="(item,index) in lcspList" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="24">
                  <el-col :span="10">
                      <h3>未选区
                        <div>
                             <el-button type="primary" @click="addUser('fy')">选择人员</el-button>
                        </div>
                      </h3>
                        
                      <el-table
                        style="width: 100%;margin-top:20px"
                        :data="dataList"
                        border
                        @row-click="rowClickLeft"
                        highlight-current-row 
                        v-loading="dataListLoading">
                        <!-- <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column> -->
                        <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                        <el-table-column
                            prop="htMc"
                            header-align="center"
                            align="center"
                            label="姓名">
                        </el-table-column>
                        <el-table-column
                            prop="htMs"
                            header-align="center"
                            align="center"
                            label="所在机构">
                        </el-table-column>
                      </el-table> 
                  </el-col>
                  <el-col :span="4">
                      <div class="text-center" style="margin-top:10vh;">
                             <div>
                                 <el-button type="primary"><i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
                             </div>
                            <div>
                                <el-button style="margin-top:20px;" type="primary"><i class="el-icon-d-arrow-left el-icon--left"></i></el-button>
                            </div>
                            <div>
                                <el-button style="margin-top:20px;"  type="primary">导入人员</el-button>
                            </div>
                         </div>
                  </el-col>
                  <el-col :span="10">
                      <h3>已选区</h3>
                      <el-table
                        style="width: 100%;margin-top:20px"
                        :data="dataList"
                        border
                        @row-click="rowClickRigth"
                        highlight-current-row 
                        v-loading="dataListLoading">
                        <!-- <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column> -->
                        <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                        <el-table-column
                            prop="htMc"
                            header-align="center"
                            align="center"
                            label="姓名">
                        </el-table-column>
                        <el-table-column
                            prop="htMs"
                            header-align="center"
                            align="center"
                            label="所在机构">
                        </el-table-column>
                      </el-table> 
                  </el-col>
              </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:"person-form",
    props:{
        personForm:{
            visible:false
        }
    },
    data(){
        return{
            form:{},
            lcspList:[
                {label:'吉林业务部',value:'1'},
            ],
            dataList:[],
            dataListLoading:false
        }
    },
    methods:{
        //未选择
        rowClickLeft(row){

        },
        //已选择
        rowClickRigth(row){

        },
    }
}
</script>

<style>

</style>